<template>
  <div class="container">
    <!--搜索-->
    <div class="searchContent">
      <searchui :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchui>
    </div>
    <div class="conBlock">
      <ul class="list_content" v-if="dataList.length > 0">
        <li class="list_item" v-for="(item, index) in dataList" :key="index">
          <el-row :gutter="24">
            <el-col :span="18">
              <dl class="list_item_l">
                <dt>
                  <span :class="item.run_sts == '3' ? 'finishedColor' : item.run_sts == '4' ? 'delColor' : ''" class="status">{{ item.run_sts == '1' ? '待开始' : item.run_sts == '2' ? '进行中' : item.run_sts == '3' ? '已结束' : item.run_sts == '4' ? '已删除' : '' }}</span>
                  <span class="rwName">任务名称【{{ item.title }}】</span>
                </dt>
                <el-row class="lineFirst">
                  <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"
                    ><dd>任务类型：<span>短信</span></dd></el-col
                  >
                  <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"
                    ><dd>
                      任务完成情况：<span>{{ item.task_sts_num ? item.task_sts_num : '-' }}</span>
                    </dd></el-col
                  >
                </el-row>
                <el-row>
                  <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"
                    ><dd>
                      创建时间：<span>{{ item.created_time ? item.created_time : '-' }}</span>
                    </dd></el-col
                  >
                  <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"
                    ><dd>
                      开始时间：<span>{{ item.start_time ? item.start_time : '-' }}</span>
                    </dd></el-col
                  >
                  <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"
                    ><dd>
                      结束时间：<span>{{ item.end_time ? item.end_time : '-' }}</span>
                    </dd></el-col
                  >
                </el-row>
              </dl>
            </el-col>
            <el-col :span="6" class="list_item_r">
              <el-button size="mini" type="primary" @click="detail(item.batch, item.title)">查看详情</el-button>
              <el-button size="mini" v-if="item.run_sts == '1' || item.run_sts == '2'" @click="edit(item)">编辑</el-button>
              <el-button size="mini" v-if="item.run_sts == '2'" type="primary" plain @click="detailHref(item)">进入任务</el-button>
            </el-col>
          </el-row>
        </li>
      </ul>
      <div v-else class="noData"></div>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
    <el-dialog :title="detailTitle" :visible.sync="detailVisible" width="60%" :before-close="handleClose">
      <div>
        <!--搜索-->
        <searchui :searchFormArr="searchFormArrDetail" @searchParma="searchDetailParma" :isAccording="isAccording" ref="child"></searchui>
        <div class="detailTable">
          <el-table :data="detailInfo" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
            <el-table-column align="center" header-align="center" label="模板ID与名称" prop="sms_id" width="120"></el-table-column>
            <el-table-column align="center" header-align="center" label="批次号" prop="batch" width="200"></el-table-column>
            <el-table-column align="center" header-align="center" label="用户名称" prop="company_boss" width="120"></el-table-column>
            <el-table-column align="center" header-align="center" label="用户号码" prop="company_phone" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="用户公司" prop="company_name" width="300"></el-table-column>
            <el-table-column align="center" header-align="center" label="发送时间" prop="send_time" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="发送状态" prop="resp_sts" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.resp_sts == 1">未发送</span>
                <span v-else-if="scope.row.resp_sts == 2">成功</span>
                <span v-else-if="scope.row.resp_sts == 3">失败</span>
              </template>
            </el-table-column>
            <el-table-column align="center" header-align="center" label="备注" prop="message" width="200"></el-table-column>
          </el-table>
          <el-pagination
            small
            background
            :current-page="detailPageIndex"
            :page-size="detailPageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="detailTotalPage"
            @current-change="currentChangeDetailHandle"
            @size-change="sizeChangeDetailHandle"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px; text-align: right"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>
    <!--编辑短信群发-->
    <el-dialog title="编辑短信群发" :visible.sync="textMessageVisible" width="50%">
      <el-form size="mini" :model="tmForm" :rules="tmRules" ref="tmForm">
        <el-form-item label="任务标题" :label-width="tmFormLabelWidth" prop="title">
          <el-input v-model="tmForm.title" autocomplete="off" maxlength="20" show-word-limit placeholder="请输入任务标题"></el-input>
        </el-form-item>
        <el-form-item label="短信模板" :label-width="tmFormLabelWidth" prop="sms_id">
          <el-select v-model="tmForm.sms_id" placeholder="请选择短信模板">
            <el-option v-for="item in smsTemplate" :key="item.sms_id" :label="item.sms_name" :value="item.sms_id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="满足条件的用户则" :label-width="tmFormLabelWidth" prop="cate" class="delayBlock">
          <el-select v-model="tmForm.cate" placeholder="请选择">
            <el-option v-for="item in select1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
          <el-input-number v-model="tmForm.number" controls-position="right" :min="1" :step="1" :precision="0"></el-input-number>
          <el-select v-model="tmForm.term" placeholder="请选择">
            <el-option v-for="item in select2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否修改了时间" :label-width="tmFormLabelWidth">
          <el-radio-group v-model="tmForm.time_is_change">
            <el-radio :label="1">未修改</el-radio>
            <el-radio :label="2">已修改</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="textMessageReset('tmForm')">取 消</el-button>
        <el-button size="mini" type="primary" @click="textMessageSubmit('tmForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { smsTasksListApi, smsTasksInfoApi, smsAllModelApi, smsTaskEditApi } from '@/api/message'
export default {
  name: 'index',
  data() {
    return {
      searchFormArr: [
        {
          fieldName: '',
          type: 'select',
          field: 'run_sts',
          option: [
            { id: '1', text: '待开始' },
            { id: '2', text: '进行中' },
            { id: '3', text: '已结束' },
            { id: '4', text: '已删除' },
          ],
          placeholder: '请选择状态',
        },
        {
          fieldName: '创建时间',
          type: 'timePicker',
          field: 'time',
          placeholder: '请选择创建时间',
        },
        {
          fieldName: '',
          type: 'inputSearch',
          field: 'title',
          placeholder: '请输入内容',
        },
      ],
      isAccording: true,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataList: [],
      searchParams: {
        title: '',
        run_sts: '',
        start_time: '',
        end_time: '',
      },
      //详情
      detailVisible: false,
      detailTitle: '任务名称',
      searchFormArrDetail: [
        {
          fieldName: '',
          type: 'select',
          field: 'resp_sts',
          option: [
            { id: '1', text: '未发送' },
            { id: '2', text: '成功' },
            { id: '3', text: '失败' },
          ],
          placeholder: '请选择状态',
        },
        {
          fieldName: '',
          type: 'inputSearch',
          field: 'title',
          placeholder: '请输入搜索的用户号码',
        },
      ],
      detailPageIndex: 1,
      detailPageSize: 10,
      detailTotalPage: 0,
      detailInfo: [],
      detailId: '',
      datailTitle: '',
      searchDetailParams: {
        title: '',
        resp_sts: '',
      },
      //短信
      tmFormLabelWidth: '140px',
      textMessageVisible: false,
      tmForm: {
        title: '',
        sms_id: '',
        cate: '1',
        number: 10,
        term: '1',
        time_is_change: 1,
        id: '',
      },
      tmRules: {
        title: [{ required: true, message: '请输入任务标题', trigger: 'blur' }],
        sms_id: [{ required: true, message: '请选择短信模版', trigger: 'change' }],
      },
      smsTemplate: [],
      select1: [
        {
          value: '1',
          label: '延迟',
        },
        {
          value: '2',
          label: '立即执行',
        },
      ],
      select2: [
        {
          value: '1',
          label: '分钟',
        },
        {
          value: '2',
          label: '天',
        },
      ],
    }
  },
  mounted() {
    this.getSmsTasksList()
    this.getSmsAll()
  },
  methods: {
    // 列表查询
    searchParma(e) {
      if (e.title) {
        this.searchParams.title = e.title
      } else if (e.run_sts) {
        this.searchParams.run_sts = e.run_sts
      } else if (e.time) {
        this.searchParams.start_time = e.time[0]
        this.searchParams.end_time = e.time[1]
      } else {
        this.searchParams.title = ''
        this.searchParams.run_sts = ''
        this.searchParams.start_time = ''
        this.searchParams.end_time = ''
      }
      this.pageIndex = 1
      this.getSmsTasksList()
    },
    // 获取短信列表
    getSmsTasksList() {
      this.dataListLoading = true
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      smsTasksListApi(formData)
        .then((res) => {
          this.dataList = res.result.items
          this.totalPage = res.result.total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getSmsTasksList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getSmsTasksList()
    },
    // 短信详情
    detail(batch, title) {
      if (batch) {
        this.detailId = batch
        this.datailTitle = title
        this.smsTasksInfo()
      }
    },
    smsTasksInfo() {
      const info = Object.assign({ batch: this.detailId, pageNumber: this.detailPageIndex, pageSize: this.detailPageSize }, this.searchDetailParams)
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      smsTasksInfoApi(formData)
        .then((res) => {
          this.detailVisible = true
          this.detailTitle = '任务名称【' + this.datailTitle + '】'
          this.detailInfo = res.result.items
          this.detailTotalPage = res.result.total
        })
        .catch((e) => {
          this.detailVisible = false
          this.detailTitle = '任务名称'
          this.detailInfo = []
          this.detailTotalPage = 0
        })
    },
    // 详情查询
    searchDetailParma(e) {
      if (e.title) {
        this.searchDetailParams.title = e.title
      } else if (e.resp_sts) {
        this.searchDetailParams.resp_sts = e.resp_sts
      } else {
        this.searchDetailParams.title = ''
        this.searchDetailParams.resp_sts = ''
      }
      this.smsTasksInfo()
    },
    // 每页数
    sizeChangeDetailHandle(val) {
      this.detailPageSize = val
      this.detailPageIndex = 1
      this.smsTasksInfo()
    },
    // 当前页
    currentChangeDetailHandle(val) {
      this.detailPageIndex = val
      this.smsTasksInfo()
    },
    handleClose() {
      this.detailVisible = false
      this.detailInfo = []
      this.detailTotalPage = 0
      this.detailPageIndex = 1
      this.detailId = ''
      this.datailTitle = ''
      this.searchDetailParams.title = ''
      this.searchDetailParams.resp_sts = ''
      this.$refs.child.resetFormClose()
    },
    //进入任务
    detailHref(item) {
      this.$router.push({
        name: 'MsgManagementDetail',
        query: {
          title: item.title,
          batch: item.batch,
        },
      })
    },
    //编辑
    edit(item) {
      this.tmForm = item
      this.tmForm.time_is_change = 1
      this.textMessageVisible = true
    },
    // 获取所有短信模板
    getSmsAll() {
      smsAllModelApi()
        .then((res) => {
          this.smsTemplate = res.result
        })
        .catch((e) => {
          this.smsTemplate = []
        })
    },
    textMessageReset(formName) {
      this.$refs[formName].resetFields()
      this.textMessageVisible = false
    },
    textMessageSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const info = Object.assign(this.tmForm)
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          smsTaskEditApi(formData)
            .then((res) => {
              this.textMessageReset('tmForm')
              this.$message({
                message: '编辑短信群发成功',
                type: 'success',
              })
              this.getSmsTasksList()
            })
            .catch((e) => {})
        } else {
          return false
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.searchContent {
  width: 100%;
  background: #fff;
  padding: 24px 32px;
  box-sizing: border-box;
}
.finishedColor {
  color: #fc151e !important;
}
.delColor {
  color: #979699 !important;
}
.container {
  padding: 16px;
  box-sizing: border-box;
  background: #f0f1f4;
  .conBlock {
    width: 100%;
    background: #fff;
    margin-top: 20px;
    padding: 24px 32px;
    box-sizing: border-box;
    .list_content {
      padding: 0;
      .list_item {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        padding: 24px 24px 11px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 24px;
        list-style: none;
        &:last-child {
          margin-bottom: 0;
        }
        .list_item_l {
          margin: 0;
          dt {
            margin: 0 0 20px;
            font-size: 18px;
            .status {
              margin-right: 20px;
              color: #2ca81d;
            }
          }
          dd {
            display: inline-block;
            margin: 12px 0;
            color: #8c8c8c;
            font-size: 14px;
            span {
              vertical-align: text-top;
              color: #262626;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
        .list_item_r {
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          button {
            display: block;
            width: 98px;
            margin: 0 0 5px 0;
            height: 34px;
            line-height: 10px;
            &:last-child {
              margin: 0px;
            }
          }
        }
      }
    }
  }
  .noData {
    display: block;
    width: 150px;
    height: 100px;
    background: url('../../../assets/img/noData.png') no-repeat;
    color: #909399;
    box-sizing: border-box;
    margin: 50px auto 0;
  }
}
.detailTable {
  margin-top: 20px;
}
.el-date-editor.el-input,
.el-input-number,
.el-select {
  width: 100%;
}
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .delayBlock .el-form-item__content {
  display: flex;
}
::v-deep .delayBlock .el-form-item__content .el-input-number {
  margin: 0 20px;
}
</style>
